<script setup lang="ts">

//表單和流程號
const props = defineProps(["approveitems", "flow"]);
const emits = defineEmits(["end_timeChange"])

function end_timeChange(index:number,row:string){
    emits('end_timeChange',index,row)
}
function collapseProduct(cellvalue:string){
  return cellvalue.length <= 16 ? cellvalue : cellvalue.substring(0,13)+"..."; 
}
</script>

<template>
  <div>
    <el-table
      :data="props.approveitems"
      style="width: 98%; margin: 10px auto; border: 1px solid grey"
      height="200"
      stripe
      :fit="true"
    >
      <el-table-column
        align="center"
        fixed
        prop="material_origina"
        label="原物料A"
        :width="props.flow <= 60 ? '140px':'100px'"
      />
      <el-table-column
        align="center"
        prop="material_replacea"
        label="替換物料A"
        :width="props.flow <= 60 ? '140px':'100px'"
      />
      <el-table-column
        align="center"
        prop="material_product"
        label="對應成品號"
        :width="props.flow <= 60 ? '120px':'100px'"
        :formatter="collapseProduct"
      >
        <template v-slot="scope">
            <el-popover title="成品料號" :width="200"  effect="dark" trigger="hover">
              <template #reference>
                <span>{{ collapseProduct(scope.row.material_product) }}</span>
              </template>
              <span>{{ scope.row.material_product }}</span>
            </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="replace_reason"
        label="替換原因"
        :width="100"
      />
      <el-table-column
        align="center"
        prop="replace_comments"
        label="備註"
        :width="100"
      />
      <el-table-column
        align="center"
        prop="unit"
        label="單位"
        :width="80"
      />
      <el-table-column
        align="center"
        prop="amount"
        label="數量"
        :width="80"
      />
      <el-table-column
        align="center"
        prop="start_time"
        label="開始日期"
        :width="120"
      />
      <el-table-column align="center" prop="end_time" label="結束日期" width="170" v-if="props.flow === 60">
        <template #default="scope">
          <el-date-picker @change="end_timeChange(scope.$index,scope.row.end_time)" v-model="scope.row.end_time" size="small" style="width: 140px;"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
        v-if="props.flow === 70"
        align="center"
        prop="end_time"
        label="結束日期"
        width="120"
      />
    </el-table>
  </div>
</template>

<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
